<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @layer components {
      .demo-title {
        /* ... */
        @apply py-4 text-2xl font-medium text-center text-gray-900 sm:text-3xl bg-gray-100;
      }
    }
  </style>
</head>
<body class="min-h-screen">
   <!--  01.警告类组件 -->
   <h2 class="demo-title">01.警告类组件</h2>
   <div class="p-4 text-green-700 bg-green-100 border-l-4 border-green-500" role="alert">
     <p class="font-bold">Simple Alert</p>
     <p>This is a Simple Alert with Tailwind Snippets</p>
   </div>
</body>
</html>